<template>
  <div>
    <el-dialog
      title="订单网站管理"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      class="mt-dialog"
      width="80%"
      @close="close"
    >

      <div class="top">
        <el-form :inline="true" style="margin-top: 10px">
          <el-form-item label="选择项目" class="mt-form-item-left">
            <el-select
              v-model="project_id"
              v-loading="projectsLoading"
              placeholder="选择项目"
              filterable
              clearable
              @change="handleChangeProject"
            >
              <el-option label="所有" value="" />
              <el-option
                v-for="item in projects"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>

      </div>
      <div v-loading="listLoading">
        <el-table
          v-loading.fullscreen.lock="listLoading"
          :data="data"
          border
          fit
          highlight-current-row
          style="width: 100%"
          @sort-change="handleSort"
        >
          <el-table-column align="center" label="网站ID" prop="id" sortable="custom" width="80" />
          <el-table-column align="center" label="域名" prop="domain" sortable="custom" />

          <el-table-column align="center" label="获取订单" prop="in" sortable="custom">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.in" />
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          v-if="data.length"
          background
          class="mt-pagination"
          :current-page="page"
          :page-sizes="[10,20,50,100]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { Post as AddOrderWeb, Get as GetOrderWebs } from '@/api/orders/psorderweb'
import { Get as GetWebsite } from '@/api/erp/elicink/website'
import { Get as GetProjects } from '@/api/erp/elicink/project'

import Cookies from 'js-cookie'

export function getToken(key) {
  const v = Cookies.get(key)
  return v && parseInt(v) || null
}

export function setToken(key, value) {
  return Cookies.set(key, value, { expires: 30 })
}

const ProjectKey = 'orders_project_id'

const orderMapper = {
  'ascending': 0,
  'descending': 1,
  'null': ''
}
export default {
  name: 'Ordersweb',
  props: ['dVisible'],
  data() {
    return {
      width: '80%',
      projects: [],
      listLoading: false,
      project_id: null,
      projectsLoading: false,
      innerLoading: false,
      dialogVisible: false,
      pagesize: 10,
      page: 1,
      total: 0,
      order_desc: 1,
      kw: '',
      data: [],
      websites: []
    }
  },
  watch: {
    dVisible(v) {
      this.dialogVisible = v
      if (v) {
        this.getList()
      }
    }
  },
  created() {
    this.project_id = getToken(ProjectKey)
    this.handleFetchProjects()
    this.handleGetWebsite()
  },
  methods: {
    handleChangeProject() {
      setToken(ProjectKey, this.project_id)
      this.handleGetWebsite()
    },
    handleSyncOrders() {
      this.loading = true
      AddOrderWeb({ website_id: this.select_web }).then(response => {
        this.loading = false
        this.$notify({
          title: '成功',
          message: '添加成功',
          type: 'success',
          duration: 1000
        })
      }).catch(error => {
        this.loading = false
        this.$message({
          type: 'error',
          message: error
        })
      })
    },
    handleGetWebsite() {
      GetWebsite().then(response => {
        this.websites = response.data.data
      })
    },
    getList() {
      this.listLoading = true
      GetOrderWebs(null, {
        pagesize: this.pagesize,
        page: this.page,
        order_by: this.order_by,
        order_desc: this.order_desc,
        kw: this.kw
      })
        .then(response => {
          this.scrollTop()
          this.data = []
          this.websites.forEach(item => {
            const info = Object.assign({}, item)
            info['in'] = false
            response.data.data.forEach(d => {
              if (d.website_id === item.id) {
                info['in'] = true
              }
            })
            this.data.push(info)
          })
          this.total = response.data.total
          this.listLoading = false
        }).catch(err => {
          console.log(err)
          this.listLoading = false
        })
    },
    notify(message, duration) {
      this.$notify({
        title: '成功',
        message: message,
        type: 'success',
        duration: duration || 2000
      })
    },
    // pageSize 改变后触发 table 更新
    handleSizeChange(val) {
      this.pagesize = val
      this.getList()
    },
    // page 改变后触发 table 更新
    handlePageChange(val) {
      this.page = val
      this.getList()
    },
    // 点击搜索
    handleSearch() {
      this.page = 1
      this.temp.website_id = this.website_id
      this.getList()
    },
    handleSort(v) {
      this.order_by = v.prop
      this.order_desc = orderMapper[v.order]
      this.getList()
    },
    scrollTop() {
      window.scrollTo(0, 0)
    },
    close() {
      this.$emit('closeDialog', false)
    },
    handleFetchProjects() {
      this.projectsLoading = true
      GetProjects()
        .then(response => {
          this.projectsLoading = false
          this.projects = response.data.data
          if (this.projects.length) {
            this.project_id = getToken(ProjectKey) || null
          }
        })
        .catch(e => {
          this.projectsLoading = false
        })
    }
  }

}
</script>

<style scoped>
  .el-tag + .el-tag {
    margin-left: 10px;
  }

  .top >>> .el-input {
    width: auto;
  }

  .top >>> .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }

  .top {
    padding-left: 20px;
    margin-bottom: 5px;
    margin-top: 28px;
  }

  .input-with-select {
    width: calc(100% - 200px);
  }

  .add-btn {
    float: right;
    margin-right: 20px;
    width: 150px
  }

  .mt-pagination {
    float: right;
    margin-top: 5px;
  }

  .app-container >>> .el-dialog {
    margin-top: 48px !important;
    margin-bottom: 5px;
  }

  .mt-dialog >>> .el-transfer-panel {
    width: calc(50% - 60px);
  }

  .mt-form >>> .el-select {
    width: 100%;
  }

  .mt-form >>> .el-input__inner {
    width: 100%;
  }

  .mt-dialog >>> .el-dialog {
    margin: 10px auto !important;
  }

  .mt-dialog >>> .el-dialog__body {
    padding-bottom: 60px;
    padding-top: 5px;
  }

  .top >>> .el-select {
    width: 300px;
  }

  .mt-form >>> a:visited {
    color: purple;
  }

  .mt-form >>> a:link {
    color: #409EFF;
  }

  .mt-form >>> a:active {
    color: red;
  }

  .mt-form >>> a:hover {
    color: red;
    text-decoration: underline;
  }
</style>
